import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Modal } from 'antd-mobile'

import { List } from 'antd-mobile';
import { NavLink } from 'react-router-dom'
import userList from './userList'
import './user.scss'

const Item = List.Item;
class Com extends Component {
  constructor(props){
    super(props)
    this.state={
      ChangeRole: false,
      CheckForUpdates: false,
      LogOut: false,
      nowRole:'teacher'
    }
  }
  onClose(key){
    this.setState({[key]:false})
  }
  changeModal(key){
    this.setState({
      [key]: true
    })
  }
  clickChangeRole(key){
    // console.log(key)
    this.setState({
      nowRole: key
    })
  }
  refuseUpdate(){
    console.log('残忍拒绝了你')
    this.onClose()
  }
  nowUpdate(){
    console.log('立即升级了你')
    // console.log(this)
    this.onClose()
  }
  logOut(){
    console.log('logout')
    this.onClose('LogOut')
  }
  render () {
    return (
      <div className='user'>
        <div className="user-box">
          <div className="user-header">
            <div className="user-header-content">
              <span>OMINI.BAS S</span>
            </div>
            <div className="user-header-avatar">
              <img src="/images/user_ images/user-header-avatar.gif" alt=""/>
            </div>
            <div className="user-header-classTitle">
              <span>绍兴市实验中学</span>
            </div>
          </div>
          <div className="user-list">
            <List>
              {
                userList.map((item, index) => {
                  // console.log(item)
                  return (
                    item.component==='ChangeRole'||item.component==='CheckForUpdates'||item.component==='LogOut'
                    ?
                    <Item 
                      extra={<>{userList[index]['rightContent']?<span className='rightContent'>{userList[index]['rightContent']}</span>:''}<img src={`/images/user_ images/${item.icon}.png`} alt={item.content+'图标'}/></>} onClick={() => {
                        // console.log(2)
                        this.changeModal(item.component)
                      }}
                      key={index + 'user-list'}
                    >
                      {userList[index].content}
                    </Item>
                    :
                    <NavLink 
                      key={index + 'user-list'}
                      to={'/user/' + userList[index].icon}
                    >
                      <Item extra={<>{userList[index]['rightContent']?<span className='rightContent'>{userList[index]['rightContent']}</span>:''}<img src={`/images/user_ images/${item.icon}.png`} alt={item.content+'图标'}/></>} onClick={() => {
                        console.log(userList[index])
                      }}>
                        {userList[index].content}
                      </Item>
                    </NavLink>
                  )
                })
              }
            </List>
          </div>
        </div>

        {/* <header className="user-header">
          <div className="user-big">
            <div className="user-nei">
              <div className="user-left">
                <div className="user-left-s">
                  <img src="images/tupian_03.png" alt=""/>
                </div>
                <div className="user-left-x">
                  <p>绍兴市实验高中</p>
                  <img src="images/tupian_10.gif" alt=""/>
                </div>
              </div>
              <div className="user-right">
                <img src="images/tupian_06.gif" alt=""/>
              </div>
            </div>
          </div>
        </header>
        <div className="user-content content">
          <List className="my-list">
            <NavLink to="/user/information">
              <Item extra={ <img src="images/u5121.png" alt=""/> } multipleLine onClick={() => {}}>
                个人信息
              </Item>
            </NavLink>
            <Item extra={ <img src="images/u5133.png" alt=""/> } multipleLine onClick={() => {}}>
              修改密码
            </Item>
            <Item extra={ <img src="images/u5138.png" alt=""/> } multipleLine onClick={() => {}}>
              角色切换
            </Item>
            <Item extra={ <img src="images/u5143.png" alt=""/> } multipleLine onClick={() => {}}>
              检查更新
            </Item>
            <Item extra={ <img src="images/u5149.png" alt=""/> } multipleLine onClick={() => {}}>
              设置
            </Item>
            <Item extra={ <img src="images/u5153.png" alt=""/> } multipleLine onClick={() => {}}>
              退出登录
            </Item>
          </List>
        </div> */}
      <Modal
        className="modal-ChangeRole"
        // closable = {true}
        animationType="slide"
        popup
        onClose = {()=>{this.onClose('ChangeRole')}}
        maskClosable ={ true }
        visible= {this.state.ChangeRole}
        // wrapClassName='modal-transparent'
      >
        <div className='modal-ChangeRole-box'>
          <div onClick={()=>{
            this.clickChangeRole('manager')
          }}
            className="changerole-item1 modal-changerole-item">
            <img src="/images/user_ images/school-management.png" alt=""/>
            <span>校园管理</span>
            {this.state.nowRole === 'manager' ? 
              <span className='now-role'>当前身份</span>:
              ''  
            }
          </div>
          <div onClick={()=>{
            this.clickChangeRole('teacher')
          }}
            className="changerole-item2 modal-changerole-item">
            <img src="/images/user_ images/teacher.png" alt=""/>
            <span>教师</span>
            {this.state.nowRole === 'teacher' ? 
              <span className='now-role'>当前身份</span>:
              ''  
            }
          </div>
          <div onClick={()=>{
            // this.clickChangeRole('parents')
            alert('你还未开通呢')
          }}
            className="changerole-item3 modal-changerole-item">
            <img src="/images/user_ images/parents.png" alt=""/>
            <span>家长</span>
            {this.state.nowRole === 'parents' ? 
              <span className='now-role'>当前身份</span>:
              ''  
            }
            <span className='no-pass'>尚未开通</span>
          </div>
        </div>
			</Modal>
      <Modal
        // closable = {true}
        animationType="slide"
        className='modal-update'
        popup
        onClose = {()=>{this.onClose('CheckForUpdates')}}
        maskClosable ={ true }
        visible= {this.state.CheckForUpdates}
      >
        <div className="modal-CheckForUpdates">
          <span className='update-title'>发现新版本<i>V6.1.0</i></span>
          <span className='update1 update-item'>
            <i>1、</i><span>新增家长绑定功能，家长可实
              时关注学生状态；</span>
          </span>
          <span className='update2 update-item'>
            <i>2、</i><span>学生考勤，轨迹功能可供使用；</span>
          </span>
          <span className='update3 update-item'>
            <i>3、</i><span>优化了一些使用上的体验~</span>
          </span>
          <span className='update-hint'>
            WIFE环境下更新不到30s哦~
          </span>
          <div className="button-box">
            <div onClick={()=>{
              this.refuseUpdate()
            }} className='refuse-update'>残忍拒绝</div>
            <div onClick={()=>{
              this.nowUpdate()
            }} className='update-now'>立即升级</div>
          </div>
        </div>
      </Modal>
      <Modal
        // closable = {true}
        animationType="slide"
        className='modal-log-out'
        popup
        onClose = {()=>{this.onClose('LogOut')}}
        maskClosable ={ true }
        visible= {this.state.LogOut}
      >
        <div className="userOut">
          <span onClick={()=>{
            this.logOut()
          }}>退出登录</span>
          <span onClick={()=>{
            this.onClose('LogOut')
          }}>关闭</span>
        </div>
      </Modal>
    </div>
    )
  }
}
export default connect()(Com)